<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

    console.log('setup......')

    const count = ref(1)

    const pRef = ref()

    onBeforeMount(() => {
        console.log('onBeforeMount......')
    })

    onMounted(() => {
        console.log('onMounted......')
        console.log(pRef.value)
    })

    onBeforeUpdate(() => {
        console.log('onBeforeUpdate......')
    })

    onUpdated(() => {
        console.log('onUpdated......')
    })

    onBeforeUnmount(() => {
        console.log('onBeforeUnmount......')
    })
    
    onUnmounted(() => {
        console.log('onUnmounted......')
    })

    
</script>

<template>  
    <p ref="pRef">{{ count }}</p>
    <button @click="count++">修改count</button>
</template>

<style scoped>

</style>